<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>留言列表</title>
	<link href="${basePath }/static/plugins/layui/css/layui.css" rel="stylesheet"/>
	<link href="${basePath}/static/build/css/app.css" rel="stylesheet" media="all">
</head>
<body>
<div class="" id="comment-main" style="margin: 12px;">
	<div class="layui-row">
		<div class="layui-col-xs8">
			<div class="layui-btn-group " id="toolbar">
				<button title="删除" class="layui-btn layui-btn-primary" data-type="deleteBatch"><i class="layui-icon">&#xe640;</i></button>
				<button title="刷新" class="layui-btn layui-btn-primary" data-type="refresh"><i class="layui-icon">&#x1002;</i></button>
				<button title="新增" class="layui-btn layui-btn-primary" data-type="toInsert"><i class="layui-icon">&#xe61f;</i></button>
			</div>
		</div>
		<div class="layui-col-xs4">
			<div id="search-inputs"></div>
		</div>
	</div>
	<div id="table" lay-filter="comment-table"></div>
</div>

<script>

	var tableIns = table.render({
        elem: '#comment-main #table'
        ,height: 'full'
        ,url: '${basePath}/admin/comment/query' //数据接口
        ,page: true //开启分页
        ,limit: 10
        ,cols: [[ //表头
            {type: 'checkbox', width: 50}
            ,{field: 'commentId', title: 'ID', sort: true}
            ,{field: 'content', title: '内容', edit: 'text'}
            ,{field: 'email', title: '邮箱',  sort: true, edit: 'text'}
            ,{field: 'phone', title: '手机', }
            ,{field: 'ip', title: 'IP', }
            ,{field: 'agent', title: '终端', }
            ,{field: 'orders', title: '排序', edit: true, sort: true}
            ,{fixed: 'right', width:140, align:'center', toolbar: '#commont-bar'}
        ]]
    });

	//初始化检索组件
    search.render({
        tableIns: tableIns,  //表格对象，必须
        elem: '#search-inputs',  //搜索的div的id或class，必须
        searchName: 'param',  //模糊查询文本框的name
        more: true,  //是否需要更多筛选，可选，默认为true，true/false
        fields: [  //更多筛选中的选项，目前仅支持文本框，其余需layui渲染的组件尚未测试，可选
            {name: 'email', type: 'text', title: '邮箱', placeholder: '请输入邮箱'}  //name：input的name，type：input的type，title：显示的名称，placeholder：input的提示文字
            ,{name: 'phone', type: 'text', title: '手机', placeholder: '请输入手机'}
            ,{name: 'content', type: 'text', title: '内容', placeholder: '请输入内容'}
            ,{name: 'agent', type: 'text', title: '终端', placeholder: '请输入终端'}
        ],
		init: function(){
            console.log('初始化后的回调函数');
		},
		onInputChange: function (data) {
		  console.log('模糊查询文本框文字改变事件')
            console.log(data);
		},
        onInputSubmit: function (data) {
			console.log('模糊查询按钮点击事件');
			console.log(data);
        },
		onInputEnter: function (data) {
		    console.log('模糊查询文本框enter事件');
			console.log(data);
		},
		onMoreShow: function(){
		    console.log('更多筛选显示后的回调函数')
		},
        onMoreHide: function(){
            console.log('更多筛选隐藏后的回调函数')
        },
        onMoreSubmit: function (data) {
            console.log('更多筛选确认后的回调函数')
            console.log(data);
		},
        onMoreReset: function (data) {
            console.log('更多筛选重置后的回调函数')
            console.log(data);
		}
    });

    //监听单元格编辑
    table.on('edit(comment-table)', function(obj){
        var value = obj.value //得到修改后的值
            ,data = obj.data //得到所在行所有键值
            ,field = obj.field; //得到字段
        var reqData = {};
        reqData[field] = value;
        reqData['commentId'] = data.commentId;
        action.update(reqData);
    });

    table.on('tool(comment-table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

        if(layEvent === 'top'){ //置顶
            layer.msg('开发中...');
        } else if(layEvent === 'del'){ //删除
            layer.confirm('是否确认删除', function(index){
                obj.del();
                var id = [data.commentId];
                action.delete(id);
                layer.close(index);
            });
        }
    });

    var action = {
        deleteBatch: function(){ //批量删除
            var checkStatus = table.checkStatus('comment-table')
                ,data = checkStatus.data;
            if(data.length == 0){
                return;
            }
            var ids = [];
            for(var i = 0; i < data.length; i++ ){
                ids.push(data[i].commentId);
            }

            deleteAction(ids);
            tableIns.reload();
        },
        refresh: function(){
            tableIns.reload();
        },
        toInsert: function(){
            var options = {
                url: "${basePath }/admin/comment/toinsert",
                icon: "&#xe658;",
                title: "新增留言",
                id: "comment-insert"
            }
            parent.tab.tabAdd(options);
        },
        delete: function(ids){
            $.ajax({
                url: '${basePath}/admin/comment/delete',
                type: 'post',
                dataType: 'json',
                data: {
                    id: ids
                },
                success: function(resp){
                    if(resp.code==10000){
                        layer.msg('删除成功',{
                            time: 1000
                        }, function(){
                            //tableIns.reload();
                        })
                    }
                }
            })
        },
        update: function(reqData){
            $.ajax({
                url: '${basePath}/admin/comment/update',
                type: 'post',
                dataType: 'json',
                data:reqData,
                success: function(resp){
                    console.log(resp)
                    if(resp.code==10000){
                        layer.msg('更新成功',{
                            time: 1000
                        });
                    }
                }
            })
        }
    };

    $('#comment-main #toolbar .layui-btn').on('click', function(){
        var type = $(this).data('type');
        action[type] ? action[type].call(this) : '';
    });

   /* $('#search-inputs').search({
        containerElemName: '.dcms-search-mored',
        tableIns: tableIns
    });*/

    action.refresh();

</script>
<script type="text/html" id="commont-bar">
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>